<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        .box {
            background-image: url(images2/bg.png);
            width: 852px;
            height: 69px;

        }

        ul {
            list-style: none;
            overflow: hidden;
        
        }

        .box li {
            float: left;
            width: 69px;
            height: 69px;
            position: relative;
        }
        li .big {
            display: none;
            width: 224px;
            height: 69px;
        }

        li .small {
            width: 69px;
            height: 69px;
            margin: 0px 5px 0px 5px;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><a href="#"><img src="images2/c1.jpg" alt="" class="small"><img src="images2/c.png" alt=""
                        class="big"></a></li>
            <li><a href="#"><img src="images2/h1.jpg" alt="" class="small"><img src="images2/h.png" alt=""
                        class="big"></a></li>
            <li><a href="#"><img src="images2/m1.jpg" alt="" class="small"><img src="images2/m.png" alt=""
                        class="big"></a></li>
            <li><a href="#"><img src="images2/t1.jpg" alt="" class="small"><img src="images2/t.png" alt=""
                        class="big"></a></li>
            <li><a href="#"><img src="images2/w1.jpg" alt="" class="small"><img src="images2/w.png" alt=""
                        class="big"></a></li>
            <li><a href="#"><img src="images2/z1.jpg" alt="" class="small"><img src="images2/z.png" alt=""
                        class="big"></a></li>
            <li><a href="#"><img src="images2/l1.jpg" alt="" class="small"><img src="images2/l.png" alt=""
                        class="big"></a></li>
        </ul>
    </div>
    <script>
        $(function(){
            $('ul > li').hover(function(){
                $(this).stop().animate({
                    width : '224px'
                }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
                // 其余兄弟li宽度变为69px，小图片淡入，大图片淡出。
                $(this).siblings('li').stop().animate({
                    width : '69px'
                }).find('.big').stop().fadeOut().siblings('.small').stop().fadeIn();
            })
        })
    </script>
</body>

</html>